<template>
	<view class="funny">
		<view class="funny-box" v-for="item in funnyList" :key="item">
			<view class="funny-title">{{ item.title }}</view>
			
			<view v-if="item.content" class="funny-content">{{ item.content }}</view>
			
			<view v-if="item.imgList.length" class="funny-img">
				<block v-if="item.imgList.length == 1">
					<OneRowOneVue :imageSrcList="item.imgList" />
				</block>
						
				<block v-else-if="item.imgList.length == 2 || item.imgList.length == 4">
					<OneRowTwoVue :imageSrcList="item.imgList" />
				</block>
						
				<block v-else>
					<OneRowThreeVue :imageSrcList="item.imgList" />
				</block>
			</view>
			
			<view class="funny-videos" v-if="item.videoSrc">
				<video
					style="width: 100%; height: 100%;" 
					:src="item.videoSrc" 
					:controls="true"  
					ref="el => { if (el) { video.ref = el; } }"
					enable-play-gesture
					show-mute-btn
					vslide-gesture
					muted
				>
				</video>
			</view>
			
			<view class="data-info-box">
				<view class="item-box">
					<u-icon size="22px" color="#000" name="eye-fill" />
					<text>{{ item.totalPreviews }}</text>
				</view>
				
				<view class="item-box">
					<u-icon size="24px" name="chat" @click="handleComment" />
					<text>{{ item.totalComments }}</text>
				</view>
				
				<view class="item-box">
					<up-icon size="24px" :color="item.collectsStatus ? '#fd6200' : '#000'" name="star-fill" />
					<text>{{ item.tatalCollects }}</text>
				</view>
				
				<view class="item-box">
					<u-icon size="24px" name="share-square" />
					<text>{{ item.totalForwards }}</text>
				</view>
			</view>
			
		</view>
		<!-- 评论弹窗 -->
		<PopupVue :popupShow="popupShow" @closeCB="popupShow = false" />
	</view>
</template>

<script setup lang="ts">
	import OneRowOneVue from '../layoutComponents/oneRowOne.vue';
	import OneRowTwoVue from '../layoutComponents/OneRowTwo.vue';
	import OneRowThreeVue from '../layoutComponents/OneRowThree.vue';
	import PopupVue from '../popupComponents/index.vue';
	
	import { defineProps, ref } from 'vue';
	const props = defineProps({
		tabsId: String || null
	});
	
	// 引入组件
	components: {
		OneRowOneVue;
		OneRowTwoVue;
		OneRowThreeVue;
		PopupVue
	};
	
	// 弹窗状态
	const popupShow = ref(false)
	
	// 搞笑
	const funnyList = ref([
		{
			collectsStatus: true, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼', // 标题
			videoSrc: '../../static/2.mp4', // 视频地址
			imgList: [], // 图片地址
			content: '', // 内容
			totalPreviews: 12345, // 总浏览数
			totalComments: 532, // 总评论数
			tatalCollects: 130, // 总收藏数
			totalForwards: 120, // 总转发数
		},
		{
			collectsStatus: false, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼222', // 标题
			videoSrc: '', // 视频地址
			imgList: [
				'https://www.cosplayla.com/picup/cospic/202402/10495_17087837077860_200.jpg'
			], // 图片地址
			content: '',
			totalPreviews: 12345, // 总浏览数
			totalComments: 532, // 总评论数
			tatalCollects: 130, // 总收藏数
			totalForwards: 120, // 总转发数
		},
		{
			collectsStatus: true, // 收藏状态
			title: '那兔新闻社，刘皇叔蹦迪。专家遭大妈怒怼333ewu didiui diuwiuedh iwf', // 标题
			videoSrc: '', // 视频地址
			imgList: [], // 图片地址
			content: '同年春天，新冠疫情重创英国。在疫情封锁中，刚刚上任财政大臣的苏纳克抓住机会，主导了价值数十亿英镑的的财政援助计划，以在封锁期间保持就业和企业的运转，为复苏餐饮业，他提出外出就餐即帮忙（“Eat Out to Help Out” ）的计划，旨在救助受新冠疫情冲击严重的酒吧、餐厅和咖啡馆，根据计划，人们在每周的周一至周三到参加活动的餐厅和咖啡厅用餐将享受最高50%、每人不超过10英镑的折扣。这些让他一度成为全英国最受公众欢迎的政客，风头甚至一度盖过了首相约翰逊。',
			totalPreviews: 12345, // 总浏览数
			totalComments: 532, // 总评论数
			tatalCollects: 130, // 总收藏数
			totalForwards: 120, // 总转发数
		},
	])
	
	// 点击评论
	const handleComment = () => {
		popupShow.value = true
	}
</script>

<style lang="scss" scoped>
	.funny {
		width: 100%;
		height: calc(100vh - 100rpx);
		// margin-top: 100rpx;
		overflow: auto;
		background-color: #f5f5f5;
		
		.funny-box {
			width: 100%;
			margin-bottom: 12rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			
			.funny-title {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 42rpx;
			}
			
			.funny-content {
				font-size: 24rpx;
				color: #000;
				line-height: 36rpx;
				margin-top: 12rpx;
			}
			
			.funny-img {
				margin-top: 12rpx;
			}
			
			.funny-videos {
				margin-top: 12rpx;
				width: 100%;
				height: 280rpx;
				border-radius: 12rpx;
			}
			
			.data-info-box {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 12rpx;
				
				.item-box {
					display: flex;
					align-items: center;
					
					text {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
	}
</style>